<template>
  <view
    class="navBack"
    :style="{
      paddingTop: statusHeight + 'px',
      height: navHeight + 'px'
    }"
  >
    <navigator open-type="navigateBack" class="backBtn"><ly-icons type="left" size="18" color="#ffffff"></ly-icons></navigator>
    <view class="content" :style="contentStyles">
      <slot>
        <view class="navTitle">
          <text class="navTitleText">{{ title }}</text>
        </view>
      </slot>
    </view>
  </view>
</template>

<script>
import LyIcons from "@/lyui/ly-icons/ly-icons";
export default {
  name: "navBack",
  components: {
    LyIcons
  },
  data() {
    return {
      statusHeight: 0,
      navHeight: 0
    };
  },
  props: {
    title: { type: String, default: "" },
    contentStyles: [String, Object, Array]
  },
  mounted() {
    this.navHeight = uni.upx2px(90);
    // #ifdef APP-PLUS
    this.statusHeight = plus.navigator.getStatusbarHeight();
    this.navHeight += this.statusHeight;
    // #endif
  }
};
</script>

<style lang="scss">
.navBack {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  @include navBg();
}
.backBtn {
  height: 90rpx;
  line-height: 90rpx;
  width: 100rpx;
  text-align: center;
}
.content {
  width: 650rpx;
  height: 90rpx;
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.navTitle {
  text-align: center;
  margin-left: -100rpx;
}
.navTitleText {
  color: #ffffff;
}
</style>
